<template>
  <div ref="pageMainContent">
    <a-card class="table-search">
      <a-form layout="inline">
        <a-form-item label="名称">
          <a-input v-model="queryParam.name" placeholder="请输入" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" icon="search" @click="searchList">查询</a-button>
          <a-button icon="reload" @click="resetForm">重置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-list
      rowKey="id"
      :grid="{ gutter: 24, column: 24 }"
      :dataSource="pageData.records"
      :pagination="pagination"
      :loading="pageData.tableLoading"
      class="card-list"
    >
      <a-list-item slot="renderItem" slot-scope="item" class="list-item">
        <template v-if="!item || item.id === undefined">
          <a-button class="new-btn" type="dashed" @click="linkTo(1, 1)">
            <a-icon type="plus" />新增卡片
          </a-button>
        </template>
        <template v-else>
          <a-card class="pages-card">
            <img
              slot="cover"
              :src="item.img || defaultImgUrl"
              :onerror="errorImage"
              :alt="item.name"
              class="bg-img"
            />
            <a-card-meta :title="item.name" />
            <template slot="actions">
              <a href="javascript:;" @click="linkTo(0, item.id, item.name)">修改</a>
              <a href="javascript:;" @click="batchDelete(item.id)">删除</a>
            </template>
          </a-card>
        </template>
      </a-list-item>
    </a-list>

    <!-- 点击编辑按钮出现的弹框 -->
    <a-drawer
      :title="infoDialog.title"
      :visible.sync="infoDialog.show"
      width="600px"
      center
      @close="infoDialog.show = false"
    >
      <info :current-info="infoDialog" @emitToParent="getChildValue" />
    </a-drawer>
  </div>
</template>

<script>
import { getCourseList, deleteCourseInfo } from '@/api/course'

const defaultImgUrl = require('@/assets/img-error.png')
export default {
  components: {
    Info: () => import('./info')
  },
  data () {
    return {
      defaultImgUrl,
      errorImage: 'this.src="' + defaultImgUrl + '"',
      queryParam: {}, // 查询参数
      pagination: { // 表格分页数据项
        total: 0,
        pageSize: 12,
        current: 1,
        onShowSizeChange: (current, size) => {
          this.pagination.current = current
          this.pagination.pageSize = size
          this.getList()
        },
        onChange: (current, size) => {
          this.pagination.current = current
          this.pagination.pageSize = size
          this.getList()
        },
        showSizeChanger: true,
        showQuickJumper: true
      },
      pageData: { // 表格数据列表
        tableLoading: false,
        records: [{}, { id: 1, name: '卡片1', des: '这是一段描述' }]
      },
      infoDialog: { // 对话框
        show: false,
        title: '新增用户',
        type: 'add',
        id: ''
      },
      extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
      pageTitle: '自定义的页面名称',
      description: '这是卡片列表的示例',
      tabs: [{
        key: '/card',
        title: '卡片列表'
      }, {
        key: '/search',
        title: '搜索卡片'
      }]
    }
  },
  created () {
    // this.getList()
  },
  methods: {
    // 获取子组件的值
    getChildValue (val) {
      this.infoDialog.show = false
      val && this.getList()
    },
    // 重置查询 form
    resetForm () {
      this.queryParam = {}
      this.pagination.pageSize = 12
      this.pagination.current = 1
      this.getList()
    },
    searchList () {
      this.pagination.pageSize = 12
      this.pagination.current = 1
      this.getList()
    },
    // 查询列表
    getList () {
      this.pageData.tableLoading = true
      const params = {
        size: this.pagination.pageSize,
        current: this.pagination.current,
        ...this.queryParam
      }
      getCourseList(params).then(res => {
        this.pagination.total = res.content.total + 1
        this.pageData.records = res.content.records
        this.pageData.records.unshift({})
      }).finally(res => {
        this.pageData.tableLoading = false
      })
    },
    // 跳转详情页
    linkTo (isAdd, id, name) {
      this.infoDialog = {
        show: true,
        isAdd,
        title: isAdd ? '新增卡片' : ('修改卡片：' + name),
        id: isAdd ? id + Math.random() : id
      }
    },
    // 删除
    batchDelete (id) {
      deleteCourseInfo({ id }).then(response => {
        this.$message.success('删除成功！')
        this.getList()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.card-list {
  // margin-top: 24px;

  .new-btn {
    background-color: #fff;
    border-radius: 2px;
    width: 100%;
    height: 220px;
  }
  .list-item {
    width: 338px;

    .bg-img {
      width: 100%;
      height: 180px;
      background-color: #fafafa;
    }

    /deep/ .ant-card-body {
      padding: 10px;
      cursor: default;
    }

    /deep/ .ant-card-meta-title {
      margin-bottom: 4px;
    }

    /deep/ .ant-card-meta-description {
      overflow: hidden;
      line-height: 22px;
    }
  }
}
</style>
